<template>
  <div class="react-right mr-4" style="width: 100%; text-align: right;">
    <!--    <span class="react-after" />-->
    <span class="text">{{ nowWeek }}</span>
    <span class="text">{{ nowDate }}</span>
    <span class="text">{{ nowTime }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      nowWeek: '',
      nowDate: '',
      nowTime: ''
    }
  },
  mounted() {
    var _this = this
    this.timer = setInterval(() => {
      this.setNowTimes()
    }, 1000)
  },
  methods: {
    setNowTimes() {
      const myDate = new Date()
      // console.log(myDate)
      const wk = myDate.getDay()
      const yy = String(myDate.getFullYear())
      const mm = myDate.getMonth() + 1
      const dd = String(
        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
      )
      const hou = String(
        myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours()
      )
      const min = String(
        myDate.getMinutes() < 10
          ? '0' + myDate.getMinutes()
          : myDate.getMinutes()
      )
      const sec = String(
        myDate.getSeconds() < 10
          ? '0' + myDate.getSeconds()
          : myDate.getSeconds()
      )
      const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      const week = weeks[wk]
      this.nowDate = yy + '年' + mm + '月' + dd + '日'
      this.nowTime = hou + ':' + min + ':' + sec
      this.nowWeek = week
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/index.scss";
</style>
